<!DOCTYPE HTML>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EasyPlayer</title>
    <script src="./EasyPlayer-element.min.js"></script>
    <script src="./axios.min.js"></script>
  <script src="./vue.min.js"></script>
</head>
<style>
     /* color: #07baf4; */
  * {
    margin: 0;
    padding: 0;
  }
  p {
    line-height: 24px;
  }
  #app {
    padding-top: 60px;
    margin: auto;
    max-width: 1200px;
  } 
  .radio-container {
    padding: 10px 0;
  }
  .radio-item{
    cursor: pointer;
    display: inline-block;
    padding: 6px 12px;
    margin-right: 15px;
    border-radius: 4px;
    border: 1px #ccc solid;
  }
  .radio-active {
    color: #fff;
    background-color: #07baf4;
    border-color: #07baf4;
  }
  .player_container {
    display: grid;
  }
  .player_container_1 {
    grid-template-columns: 1fr;
    grid-template-rows:  1fr;
  }
  .player_container_4 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows:  1fr 1fr;
  }
  .player_container_6 {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
  }
  .player_container_9 {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
  }
  .player_active {
    box-shadow: 0 0 2px 1px red;
  }
  .player_item {
    position: relative;
    padding-bottom: 54%;
    background-color: #ccc;
    border: 1px #fff solid;
  }
  .player_box {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
  }
  .playerurl-container {
    display: flex;
    padding-bottom: 10px;
  }
  .play-btn {
    width: 80px;
    text-align: center;
    line-height: 40px;
    height: 40px;
    cursor: pointer;
    margin-left: 15px;
    border-radius: 4px;
    color: #fff;
    background-color: #07baf4;
    border-color: #07baf4;
  }
  input {
    -webkit-appearance: none;
    background-color: #fff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: none;
    padding: 0 15px;
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width: 100%;
  }
  .closes {
    position: absolute;
    cursor: pointer;
    top: 5px;
    right: 5px;
    width: 40px;
    height: 24px;
    text-align: center;
    line-height: 24px;
    border-radius: 4px;
    font-size: 12px;
    color: #fff;
    background-color: rgba(0, 0, 0, .7);
    z-index: 999;
  }
  .maks {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    background-color: rgba(0, 0, 0, .7);
  }
  .maks>div{
    min-height: 400px;
    max-width: 600px;
    width: 100%;
    margin-top: -240px;
    background-color: #fff;
    border-radius: 6px;
  }
  .maks>div h1 {
    text-align: center;
    font-size: 22px;
    margin-top: 20px;
  }
  .form-item {
    display: flex;
    padding: 16px;
    padding-bottom: 0;
  }
  .form-item >span {
    display: inline-block;
    width: 120px;
    line-height: 70px;
    text-align: right;
    padding-right: 6px;
  }
  .form-list {
    margin-right: 16px;
  }
  .form-item-btn {
    text-align: right;
    padding: 16px;
  }
</style>
<body>
<div id="app">
  <h1>EasyPlayer 多分屏案例（动态地址）</h1>
  <br>
  <div class="radio-container">
    <!-- <div :class="['radio-item',{'radio-active': radio==item.value}]" v-for="(item,index) in radioList" :key="index" @click="onRadio(item.value)">
      {{item.label}}
    </div> -->
    <div class="radio-item" @click="onPlay()">
      播放
    </div>
    <div class="radio-item" @click="onStop()">
      停止
    </div>
    <div class="radio-item" @click="onConfig()">
      配置
    </div>
  </div>
  <div class="playerurl-container">
    <!-- <input  v-model="playerUrl"> -->
   
  </div>
  <div :class="['player_container','player_container_'+radio]">
    <div class="player_item" v-for="(item,index) in playerList"  @click="onActive(index)">
      <!-- <div class="closes" @click="onCloes(index)"> 关闭</div> -->
      <easy-player
        :class="['player_box',{'player_active': active==index}]"
        :key="index"
        :muted="muted"
        :data-index="index"
        :video-url="item.videoUrl"
        :ref="'player'+index"
        style="height: 100%"
        @error="restartPlayer"
        @ended="restartPlayer"
      />
    </div>
  </div>
  <br>
  <!-- <p>列如：http://127.0.0.1:8080/flv/hls/stream.flv <a href="http://www.easydarwin.org/easyplayer/" target="_blank"> 在线演示</a>
  </p>
  <p>文档：<a href="https://github.com/tsingsee/EasyPlayer.js" target="_blank"> GitHub </a>  &nbsp; <a href="https://www.npmjs.com/package/@easydarwin/easyplayer" target="_blank"> NPM</a>
  </p>
  <p style="color:red;font-size: 12px;">注意：本实例需要以服务方式启动 <a href="https://blog.csdn.net/weixin_43194037/article/details/108885134" target="_blank">搭建服务教程</a></p>  -->

  <div class="maks" v-if="isMaks">
    <div>
      <h1>默认配置</h1>
      <div class="form-item">
        <div class="form-list">
          <span>服务地址</span>: <input  v-model="config.ip">
        </div>
        <div class="form-list">
          <span>用户名</span>: <input  v-model="config.name">
        </div>
        <div class="form-list">
          <span>密码</span>: <input  type="password" v-model="config.pwd">
        </div>
        <!-- <div class="form-list">
          <span>协议</span>: <input  type="password" v-model="config.protocol">
        </div> -->
      </div>
      <div class="form-item" v-for="(item, index) in config.list" :key="index">
        <div class="form-list">
          <span>设备编码{{index+1}}</span>: <input  v-model="item.dev">
        </div>
        <div class="form-list">
          <span>通道编码{{index+1}}</span>: <input v-model="item.chn">
        </div>
      </div>
      <div class="form-item-btn">
        <div class="radio-item" @click="isMaks = false">
          关闭
        </div>
        <div class="radio-item" @click="onSave">
          保存
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  new Vue({
    el: "#app",
    data() {
      return {
        active:0,
        radio: 6,
        radioList: [// 选择分屏
          { label:"单分屏", value: 1 },
          { label:"四分屏", value: 4 }
        ],
        protocol:'hls',
        config: {
          ip:'',
          name:'',
          pwd:'',//EasyCVR@202301
          list:[
            {dev:'',chn:''},
            {dev:'',chn:''},
            {dev:'',chn:''},
            {dev:'',chn:''},
            {dev:'',chn:''},
            {dev:'',chn:''},
          ]
        }, // 控制音频
        muted: false, // 控制音频
        isMaks: false, // 控制音频
        playTime: null, // 控制音频
        token: '', // 控制音频
        playerList: [],
        playerUrl: '',
      }
    },
    mounted() {
      this.setPlayerList()
      let list = this.getNewsStorage()
      this.config = list
    },
    methods: {
      setPlayerList(){// 设置分屏
        this.onStop()
   
        this.playerList = []
        for (let index = 0; index < this.radio; index++) {
          this.playerList.push({videoUrl: ""})
        }
      },
      onLogin(){ // 播放
        let _this = this
        if (_this.config.ip&&_this.config.name&&_this.config.pwd) {
          _this.stopPlay()
          axios.get(`${_this.config.ip}/api/v1/login?username=${_this.config.name}&password=${_this.config.pwd}`)
          .then(function (response) {
              // 处理成功情况
              if (response.data.EasyDarwin.Body.Token) {
                _this.token = response.data.EasyDarwin.Body.Token
                _this.satrtPlay()
              }      
          })
          .catch(function (error) {
              // 处理错误情况
              console.log("处理错误情况",error);
              _this.token = ''
          })
          .then(function () {
              // 总是会执行
          });
        }
      },
      onPlay(){ // 播放
        this.onLogin()
        // this.playerList[this.active].videoUrl = this.playerUrl
      },
      onStop(){
        this.stopPlay()
        for (let index = 0; index < this.playerList.length; index++) {
          this.playerList[index].videoUrl = ""
          this.playerList[index].type = ""
          this.playerList[index].url = ""
        }
      },
      onConfig(){
       this.isMaks = true
      },
      onSave(){
        this.setNewsStorage(this.config)
        this.isMaks = false
      },
      onRadio(val){// 分屏选择
        this.radio = val
        this.setPlayerList()
      },
      onActive(val){
        this.active = val
      },
      onCloes(index){
        this.playerList[index].videoUrl = ""
        this.playerList[index].type = ""
        this.playerList[index].url = ""
        this.config.list[index].url = ""
      },
      restartPlayer(e) {// 错误捕获
        const {index} = e.currentTarget.dataset
        const playerStr = "player" + index
        let [player] = this.$refs[playerStr]
        player = player.getVueInstance()
        player.initPlayer()  // 重新初始化播放器
      },
      getUrlPlayer(){
        let _this = this
        this.config.list.forEach((item,index) => {
          if (item.dev&&item.chn) {
            setTimeout(() => {
              _this.getHttpPlayer(item,index)
            }, index * 1000);
          }
        });
      },
      getHttpPlayer(item, index){
        let _this = this
        let now = new Date().getTime()
        console.log();
        let url = ''
        let ptype = _this.playerList[index].type
        let purl = _this.playerList[index].url
        if (ptype == 'keepalive') {
          url = `${_this.config.ip}/api/v1/devices/channelstream?device=${item.dev}&channel=${item.chn}&protocol=${_this.protocol}&stream=main&_t=${now}&type=keepalive&url=${purl}`
        } else {
          url = `${_this.config.ip}/api/v1/devices/channelstream?device=${item.dev}&channel=${item.chn}&protocol=${_this.protocol}&stream=main&token=${_this.token}&_t=${now}`
        }
        console.log(url,item);
        axios.get(url)
          .then(function (response) {
              // 处理成功情况
              let Body = response.data.EasyDarwin.Body
              if (response.data.EasyDarwin.Body) {
                _this.playerList[index].videoUrl = _this.config.ip+Body.URL
                _this.playerList[index].type = 'keepalive'
                _this.playerList[index].url = Body.URL
              }
          })
          .catch(function (error) {
              // 处理错误情况
        
          })
          .then(function () {
              // 总是会执行
          });
        
      },
      satrtPlay(){ // 播放
        let _this = this
        _this.getUrlPlayer()
        _this.playTime = setInterval(() => {
          _this.getUrlPlayer()
        }, 30 * 1000);
      },
      stopPlay(){ // 播放
        clearInterval(this.playTime)
        if (this.playTime) {
          this.playTime = null
        }
        // this.playerList[this.active].videoUrl = this.playerUrl
      },
      // 本地存储消息信息
      getNewsStorage() {
          let arr = localStorage.getItem("configlist");
          return JSON.parse(arr) || {};
      },

      setNewsStorage(value) {
          return localStorage.setItem("configlist", JSON.stringify(value));
      },

      clearNewsStorage() {
          return localStorage.removeItem("configlist");
      }
    }
  })
</script>

</body>

</html>
